<template>
    <div class="header wrap">
    <h1><img src="@/assets/images/indexLogo.png" alt=""></h1>
    <ul class="nav">
        <li :class="$route.path == '/home'?'active':''" @click="$router.push('/home')">首页</li>
        <li :class="$route.path == '/goods'?'active':''" @click="$router.push('/goods')">全部商品</li>
        <li :class="$route.path == '/user'?'active':''" @click="$router.push('/user')" >个人中心</li>
        <li :class="$route.path == '/order'?'active':''" @click="$router.push('/order')">我的订单</li>
        <li :class="$route.path == '/free'?'active':''" @click="$router.push('/free')">专属福利</li>
    </ul>
    <div class="serch" >
        <input type="text"  placeholder="请输入一些有趣的东西">
        <span><img width="20" height="20" src="@/assets/images/search.png" alt=""></span>
    </div>
    </div>
</template>

<script>
export default {
    created() {
        console.log(this.$route);
    },
    data () {
        return {

 
        }
    }
}
</script>
 
<style lang = "less" scoped>
    .header{
        height: 118px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h1{
            display: flex;
            align-items: center;
        }
        .nav{
            display: flex;
            width: 500px;
            justify-content: space-between;
            li{
                cursor: pointer;
            &.active{
                color: #0A328E;
                font-weight: 700;
            }
            }
        }
        .serch{
            display: flex;
            input{
            width: 214px;
           height: 38px;
       border: 1px solid #DEDEDE;
       border-radius: 20px 0px 0px 20px;
       text-indent: 2em;
            }
       span{
        width: 50px;
     height: 40px;
     background: #0A328E;
      border-radius: 0px 20px 20px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
       }
        }
        
    }
</style>